<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pages/user/address?type=select" class="address-section">
			<view class="order-content">
				<view class="top">
					<template v-if="Object.keys(addressData).length > 0">
						<view class="left">
							<view class="btn" v-if="addressData.isDefault">默认</view>
							<text>{{addressData.name}}</text>
						</view>
						<view class="mobile num-font" style="font-weight: 200!important;">{{addressData.telephone}}</view>
					</template>
					<template v-else>
						<view class="left">
							<text>添加地址</text>
						</view>
					</template>
					<view class="yticon icon-you"></view>
				</view>
				<view class="address" v-if="Object.keys(addressData).length > 0">{{addressData.region}} {{addressData.detailAddress}}</view>
			</view>
		</navigator>

		<view class="goods-section" v-for="(item,index) in cartList" :key="index">
			<view class="g-header">
				<!-- <image class="logo" src="http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png"></image> -->
				<text class="name">{{item.seller_name}}</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(sku,skuIndex) in item.skuList" :key="skuIndex">
				<image :src="imgsrc + sku.pic"></image>
				<view class="right">
					<text class="title clamp">{{sku.product_name}}</text>
					<text class="spec">{{sku.detail_desc}}</text>
					<view class="item-price-box">
						<text class="price">￥{{sku.price}}</text>
						<text class="number">x {{sku.count}}</text>
					</view>
				</view>
			</view>
		</view>

		
		<!-- 优惠明细 -->
		<view class="yt-list" v-if="exchangeFortune == null">
			<view class="yt-list-cell b-b" @click="showCouponPopup">
				<!-- <view class="cell-icon">
					券
				</view> -->
				<text class="cell-tit clamp title">优惠券</text>
				<text class="cell-tip active">
					选择优惠券
				</text>
				<view class="yticon icon-you"></view>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b">
				<!-- <view class="cell-icon hb">
					减
				</view> -->
				<!-- <text class="cell-tit clamp title">商家促销</text> -->
				<text class="cell-tip disabled">暂无可用优惠</text>
			</view>
			<view class="yt-list-cell b-b align-t-b">
				<!-- <view class="cell-icon hb">
					福
				</view> -->
				<view class="align-t-b-cell">
					<text class="desc-cell clamp title">福分抵扣</text>
					<!-- <input class="desc" type="text" disabled placeholder="使用100福分可抵扣￥1.00现金" placeholder-class="placeholder" /> -->
					<text class="cell-tit clamp" style="margin-left: 20upx;font-size: 24upx;">今日福分价格{{fortuneRate}}元</text>
					<switch :checked="turnOnIntegral" color="#FFBC21" @change="switchChange" />
				</view>
				<view class="align-t-b-cell" v-if="turnOnIntegral">
					<text class="cell-dec">你的账户共有{{fortune}}福分 本次使用</text>
					<input class="custom-input-integral" confirm-type="done" type="number" value="diyIntegral" v-model="diyIntegral" @input="calculateIntegral" />
					<text class="cell-dec">福分，可抵扣<span class="cell-tip red">{{ integralExchage }}</span>元</text>
				</view>
				<!-- <text class="cell-tip disabled">暂无可用优惠</text> -->
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<template v-if="exchangeFortune == null">
				<view class="yt-list-cell">
					<text class="cell-tit clamp">商品合计</text>
					<text class="cell-tip">￥{{calcAmount.totalAmount}}</text>
				</view>
			</template>

			<view class="yt-list-cell">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">{{calcAmount.freightAmount|freightAmountFormat}}</text>
			</view>

			<template v-if="exchangeFortune == null">
				<view class="yt-list-cell">
					<text class="cell-tit clamp">优惠金额</text>
					<text class="cell-tip red">￥-{{calcAmount.promotionAmount|toFixed}}</text>
				</view>
				<view class="yt-list-cell">
					<text class="cell-tit clamp">会员折扣</text>
					<text class="cell-tip red">￥-{{calcAmount.memberIntegration|toFixed}}</text>
				</view>
				<view class="yt-list-cell">
					<text class="cell-tit clamp">福分抵扣</text>
					<text class="cell-tip red">￥-{{calcAmount.fortuneDeduction|toFixed}}</text>
				</view>
			</template>

			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<template v-if="exchangeFortune == null">
					<text class="price-tip">￥</text>
					<text class="price num-font" style="font-size: 45upx;">{{calcAmountFormat}}</text>
				</template>
				<template v-else>
					<text class="price">{{exchangeFortune}}福分</text>
				</template>

			</view>
			<text class="submit" @click="submit ('show')">提交订单</text>
		</view>

		<!-- 优惠券面板 -->
		<uni-popup ref="couponPopup" type="bottom">
			<view class="popup-box">
				<view class="coupon-item" v-for="(item,index) in couponList" :key="index">
					<view class="con">
						<view class="left">
							<text class="title">{{item.title}}</text>
							<text class="time">有效期至2019-06-30</text>
						</view>
						<view class="right">
							<text class="price">{{item.price}}</text>
							<text>满30可用</text>
						</view>

						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<text class="tips">限新用户使用</text>
				</view>
			</view>
		</uni-popup>



		<!-- 支付面板 -->
		<uni-popup ref="payPopup" type="bottom" @change="payPopupChange">
			<view class="popup-box">
				<view class="price-box">
					<text class="price num-font">{{calcAmountFormat}}</text>
					<!-- <text>订单号</text>
					<text>{{orderInfo.orderSn}}</text> -->
					<!-- <text>支付金额</text> -->
					<text>请在00:24:00内完成支付</text>
				</view>
				<!-- <view class="price-box">
					
				</view> -->

				<view class="pay-type-list">

					<view class="type-item" @click="changePayType(1)">
						<text class="icon yticon icon-weixinzhifu"></text>
						<view class="con">
							<text class="tit">微信支付</text>
							<text>推荐使用微信支付</text>
						</view>
						<label class="radio">
							<radio value="" color="#FFBC21" :checked='payType == 1' />
							</radio>
						</label>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="type-item" @click="changePayType(2)">
						<text class="icon yticon icon-alipay"></text>
						<view class="con">
							<text class="tit">支付宝支付</text>
						</view>
						<label class="radio">
							<radio value="" color="#FFBC21" :checked='payType == 2' />
							</radio>
						</label>
					</view>
					<!-- #endif -->

					<!-- 现金支付功能暂时屏蔽 -->
					<!-- <view class="type-item" @click="changePayType(3)">
						<text class="icon yticon icon-erjiye-yucunkuan"></text>
						<view class="con">
							<text class="tit">预存款支付</text>
							<text>可用余额 ¥198.5</text>
						</view>
						<label class="radio">
							<radio value="" color="#FFBC21" :checked='payType == 3' />
							</radio>
						</label>
					</view> -->
				</view>
				<view class="pay-btn" @click="confirmPay">立即支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		mapState
	} from 'vuex';
	import {
		mapMutations
	} from 'vuex';

	import weixinPay from '@/common/wxPay.js'
	import CommonPay from '@/common/commonPay.js';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				imgsrc: Api.imgsrc,
				exchangeFortune: null,
				productId: null,
				diyIntegral: 0, //用户自定义输入福分
				fortuneRate: 0, //福分汇率 倒数
				fortune: 0, //福分
				turnOnIntegral: false, //是否开启福分抵扣
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				cartList: [], //商品购物车
				sku: '',
				payType: 1, //1微信 2支付宝
				type: 0, // 0为多商品订单 1为单商品订单
				couponList: [], //优惠券数据
				addressData: {},
				calcAmount: {
					totalAmount: 0, //商品合计 
					freightAmount: 0, //运费价格
					promotionAmount: 0, //优惠金额
					memberIntegration: 0, //会员折扣
					fortuneDeduction: 0, //福分抵扣
					payAmount: 0 //实际支付金额
				},
				// 支付面板
				// maskPayState: 0, //优惠券面板显示状态
				trade_type: '',
				orderId: '',
				// orderInfo: {
				// 	orderSn: '',
				// 	payAmount: '0',
				// 	type: 0, // 0为普通用户 1为会员 2为代理商
				// },
				url: ''
			}
		},
		onLoad(option) {
			let type = option.type;
			if (Object.prototype.toString.call(option.fortune) != '[object Undefined]') {
				this.exchangeFortune = option.fortune; //上级页面传值过来的商品福分
				this.productId = option.product_id; //上级页面传值过来的商品ID
			}
			if (type == 1) {
				this.sku = {
					"sku_id": option.sku_id,
					"count": option.count
				}
				this.type = type;
			}
			var userInfo = uni.getStorageSync('userInfo');
			// #ifdef H5
			this.trade_type = 'JSAPI';
			let isWeiXin = weixinPay.isWechat();			
			if (isWeiXin && !userInfo.we_chat_openid) {
				//客户端为微信浏览H5
				this.wxAuthorize();
				return false;
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (!userInfo.mini_openid) {
				//客户端为微信小程序
				this.minApp_Authorize();
				return false;
			}
			// #endif
			this.loadData();
		},
		onShow() {
			this.updateAddress();
		},
		filters: {
			toFixed: (x) => {
				return parseFloat(x).toFixed(2);
			},
			freightAmountFormat: (value) => {
				return value == 0 ? '免运费' : `¥ ${parseFloat(value).toFixed(2)}`
			}
		},
		computed: {
			...mapState(['userInfo']),
			integralExchage() {
				return (this.diyIntegral * this.fortuneRate).toFixed(2);
			},
			calcAmountFormat() {
				let {
					totalAmount,
					freightAmount,
					promotionAmount
				} = this.calcAmount;
				let payAmount = this.userInfo.type > 0 ? (this.calcAmount.totalAmount * 0.95).toFixed(2) : this.calcAmount.totalAmount; //商品会员折扣后的金额（仅会员折扣）
				this.calcAmount.payAmount = payAmount + freightAmount - promotionAmount - this.calcAmount.fortuneDeduction;
				return this.calcAmount.payAmount.toFixed(2);
			}
		},
		methods: {
			...mapMutations(['login', 'updateUserInfo']),
			async loadData() {
				let items = await uni.getStorageSync('buylist');
				let apiParams = {},
					data, userInfoData = await Api.apiCall('post', Api.index.userInfo, apiParams);

				if (userInfoData) {
					let userInfo = await uni.getStorageSync('userInfo');
					this.fortuneRate = userInfoData.fortune_rate; //福分汇率
					this.fortune = userInfoData.fortune; //福分
					console.log(userInfoData)
					// this.userInfo.type = userInfoData.type;
					// userInfo.fortune = userInfoData.fortune; //记录获取到的服务器福分
					// userInfo.type = userInfoData.type; //记录身份类型
					// uni.setStorageSync('userInfo', userInfo);
					this.updateUserInfo(Object.assign(userInfo, userInfoData));
				}

				if (this.type == 1) {
					let params = {
						'items': this.sku, // 商品结算SkuID和数量
					}
					data = await Api.apiCall('get', Api.order.bookOrder, params);
				} else {
					console.log(this.type)
					let params = {
						'items': items // 商品结算SkuID和数量
					}
					data = await Api.apiCall('post', Api.order.bookOrder, params);
				}
				// this.total_count = data.total_count;
				this.calcAmount.totalAmount = Number(data.total_price);
				this.calcAmount.payAmount = this.userInfo.type > 0 ? (Number(data.total_price) * 0.95).toFixed(2) : Number(data.total_price); //如果是会员，商品价格为95折
				this.calcAmount.memberIntegration = this.userInfo.type > 0 ? (Number(data.total_price) * 0.05).toFixed(2) : 0.00; //会员折扣价
				this.cartList = data.cartList;
				
				//加载地址
				this.getAddress();

			},
			async updateAddress(){
				let address = await uni.getStorageSync('selectAddress');
				if (address) {
					address.region = address.province + address.city + address.district;
					address.detailAddress = address.street1;
					this.addressData = address;
				}
			},
			async getAddress(){
				if(uni.getStorageSync('selectAddress')) return;
				let params = {}, data = await Api.apiCall('post', Api.goods.listAddress, params);
				if (data) {
					data.forEach(item => {
						item.mobile = item.telephone;
						item.telephone = item.telephone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
						item.region = {
							"label": `${item.province}-${item.city}-${item.district}`,
							"value": item.cityValue ? item.cityValue.split(',').map(e => Number(e)) : null,
							"cityCode": item.cityCode
						};
						item.isDefault = item.is_default == 1;
					});
					uni.setStorageSync('selectAddress',data[data.findIndex(e => e.isDefault)]);
					this.updateAddress();
					this.$forceUpdate();
				}
			},
			//计算用户输入的自定义福分
			calculateIntegral(e) {
				//长度大于2且首位为0进行剔除操作
				let payAmountFortune = this.userInfo.type > 0 ? (this.calcAmount.totalAmount * 0.95 / this.fortuneRate).toFixed(2) :
					(this.calcAmount.totalAmount / this.fortuneRate).toFixed(2); //商品会员折扣后的金额（仅会员折扣）
				// let val = e.target.value.length >= 2 && e.target.value.charAt('0') == 0 ? e.target.value.substr(1) : e.target.value;
				let val = Number(e.target.value)
				//val diyIntegral 为自定义输入的值 integral为用户福分  
				if (!!val) { //如果val有值  !!表示强制转换为布尔值
					if ((val <= this.fortune && this.fortune <= payAmountFortune) || (val <= payAmountFortune && payAmountFortune <=
							this.fortune)) {
						this.diyIntegral = val;
						this.calcAmount.fortuneDeduction = val * this.fortuneRate;
					} else if (this.fortune <= val && val <= payAmountFortune) {
						setTimeout(() => {
							this.diyIntegral = this.fortune;
							this.calcAmount.fortuneDeduction = this.fortune * this.fortuneRate;
							this.$api.msg('超过拥有的福分，已重置为默认拥有的福分')
						}, 0)
					} else {
						if (this.fortune < val && payAmountFortune < val && payAmountFortune > this.fortune) {
							setTimeout(() => {
								this.diyIntegral = this.fortune;
								this.calcAmount.fortuneDeduction = this.fortune * this.fortuneRate;
							}, 0);
						} else {
							setTimeout(() => {
								this.diyIntegral = payAmountFortune;
								this.calcAmount.fortuneDeduction = this.userInfo.type > 0 ? (this.calcAmount.totalAmount * 0.95).toFixed(2) :
									this.calcAmount.totalAmount.toFixed(2);
							}, 0)
						}
					}
				} else {
					this.diyIntegral = 0;
					this.calcAmount.fortuneDeduction = 0;
				}
				this.$forceUpdate();
			},
			//显示优惠券面板
			showCouponPopup() {
				if (this.couponList.length === 0) {
					this.$api.msg('暂无优惠券')
					return;
				}
				this.$refs.couponPopup.open()
			},
			hideCouponPopup() {
				this.$refs.couponPopup.close()
			},
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			//显示支付面板
			showPayPopup() {
				this.$refs.payPopup.open();
			},
			payPopupChange(e) {
				if (!e.show) uni.redirectTo({
					url: '/mall/order/order'
				})
			},
			hidePayPopup() {
				this.$refs.payPopup.close();
			},
			async submit(type) {
				if (!this.addressData.id) {
					this.$api.msg('请选择收货地址');
					return;
				}
				let items = [];
				if (this.type == 1) {
					this.cartList.forEach(item => {
						items.push({
							"sellerid": item.seller_id,
							"skus": [{
								"sku": item.skuList[0].sku_id,
								"qty": item.skuList[0].count
							}]
						});
					})
				} else {
					items = uni.getStorageSync('buylist');
				}
				let params = {
					'items': items, // 商品结算SkuID和数量
					'address_id': this.addressData.id, //订单收货地址
					'coupon_id': 0,
					'remark': '订单测试',
				};
				if (this.exchangeFortune == null) {
					params = Object.assign(params, {
						'fortune': this.turnOnIntegral && this.calcAmount.payAmount == 0 ? 0 : this.diyIntegral,
						'type': this.turnOnIntegral && this.calcAmount.payAmount == 0 ? 6 : 2 // type 1.购物车订单， 2.立即下单， 3. 会员购买下单， 4.代理商购买下单, 5.福分兑换下单， 6.福分购买下单
					})
				} else {
					params = Object.assign(params, {
						'product_id': this.productId, //商品ID
						'type': 5 // type 1.购物车订单， 2.立即下单， 3. 会员购买下单， 4.代理商购买下单, 5.福分兑换下单， 6.福分购买下单
					})
				}

				//商品列表
				let data = await Api.apiCall('post', Api.order.addOrder, params);
				if (data) {
					this.orderId = data.id
					if (this.exchangeFortune == null) {
						if (this.turnOnIntegral && this.calcAmount.payAmount == 0) {
							this.payType = 3; //直接 福分兑换 商品
							this.confirmPay();
						} else {
							this.showPayPopup()
						}
					} else {
						this.payType = 4; //直接 福分兑换 商品
						this.confirmPay();
					}

					uni.$emit('deleteSeleted')
					// uni.removeStorage({
					//     key: 'buylist'  
					// })
					// let url = `/pages/money/pay?id=${data.id}&&total_amount=800`;
					// uni.navigateTo({
					// 	url: url
					// })
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					});
				}
			},
			switchChange(e) {
				//因uniapp组件 switch的v-model无效bug，导致无法更新视图，使用此方法
				this.turnOnIntegral = !this.turnOnIntegral;
				this.$nextTick(() => {
					if (this.fortune > 0) {
						this.turnOnIntegral = e.target.value; //开关福分兑换按钮
						if (!e.target.value) {
							this.fortuneInit();
						}
					} else {
						this.turnOnIntegral = false;
						this.$api.msg('您福分为零，不足以抵扣');
					}
				});
			},
			fortuneInit() {
				this.diyIntegral = 0;
				this.calcAmount.fortuneDeduction = 0;
			},
			//微信客户端支付
			wechatPay() {
				let commonPay = new CommonPay(this.orderId, this.calcAmount.payAmount, this.url);
				commonPay.weChatPay(this.trade_type);
			},
			//支付宝客户端支付
			aliPay() {
				let commonPay = new CommonPay(this.orderId, this.calcAmount.payAmount, this.url);
				commonPay.aliPay(this.trade_type);
			},
			//微信h5支付
			wechatH5pay() {
				let commonPay = new CommonPay(this.orderId, this.calcAmount.payAmount, this.url);
				commonPay.h5WechatPay(this.trade_type);
			},
			//微信小程序支付
			weixinAppletPay() {
				let commonPay = new CommonPay(this.orderId, this.calcAmount.payAmount, this.url);
				commonPay.miniAppWechatPay(this.trade_type);
			},
			//确认支付
			async confirmPay() {
				console.log('**********进入支付流程************');
				var _this = this;
				// #ifdef H5
				this.wechatH5pay();
				// #endif
				switch (this.payType) {
					// #ifdef APP-PLUS
					case 1:
						this.trade_type = 'APP'; //微信
						this.wechatPay();
						break
					case 2:
						this.trade_type = 'alipayApp' //支付宝
						this.aliPay()
						break;
						// #endif
					case 3:
						this.trade_type = 'fortune_pay' //福分抵扣
						break;
					case 4:
						this.trade_type = 'fortune_exchange' //福分兑换
						break;
				}
				// #ifdef MP-WEIXIN
				this.trade_type = 'MINIAPP'
				this.weixinAppletPay(); //微信小程序支付
				// #endif
				switch (this.payType) {
					case 3:
					case 4:
						uni.redirectTo({
							url: `/pages/money/paySuccess?payType=${this.payType}&payAmount=0.00&orderId=${this.orderId}`
						})
						break;
				}
			},
			/**
			 * 根据参数名 获取 URL 路径中的参数  
			 * @param {String} name 要读取的参数名称  
			 */
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
				let url = window.location.href.split('#')[0]
				let search = url.split('?')[1]
				if (search) {
					var r = search.substr(0).match(reg)
					if (r !== null) return unescape(r[2])
					return null
				} else {
					return null
				}
			},
			async wxAuthorize() {
				let link = window.location.href;
				let _this = this;
				let wx_code = this.getUrlParam('code'); // 地址解析 
				// 已经授权登录过的就不用再授权了  
				// if (store.state.token) return;  
				// 如果拿到code，调用授权接口，没有拿到就跳转微信授权链接获取    
				if (wx_code) {
					// 调用后台接口，授权
					var params = {
						"secret": wx_code,
						"app_type": "wechat"
					}
					let res = await Api.apiCall('post', Api.index.wxAuth, params);
					if (res) {
						var userInfo = uni.getStorageSync('userInfo');
						userInfo.we_chat_openid = res.we_chat_openid; //微信公众号用户openID
						this.login(userInfo); //把微信公众号用户OpenID刷新用户信息缓存中
						this.loadData();

					}
				} else {
					// 微信公众号appID
					let appid = Api.wx_chat_appid;
					//1.使用encodeURIComponent以及JSON.stringify()方法对对象进行字符串化和编码，这样可以控制url参数的长度，参考示例代码（uni-app书写方式，微信小程序自己改。）  
					let uri = encodeURIComponent(link);
					//2.接受信息的页面使用JSON.parse()以及decodeURIComponent()接收和解码参数。
					//snsapi_base   //snsapi_base    scope = snsapi_base（不弹出授权页面，直接跳转，只能获取用户 openid ）。  
					//snsapi_userinfo  弹出  
					let authURL =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
					window.location.href = authURL;
				}
			},
			minApp_Authorize(){
				var _this = this;
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						uni.setStorage({ //缓存用户openid
							key: 'wx_mini_code',
							data: loginRes.code
						})
						_this.wxMiniAuth(loginRes.code);//通过服务器获取微信小程序openID
					},
					fail: (e) => {
						plus.nativeUI.alert("fail: " + JSON.stringify(e));
						console.log("fail: " + JSON.stringify(e));
					}
				});
			},
			async wxMiniAuth(code){
				var params = {
					"secret": code,
					"app_type": "mini"
				}
				let res = await Api.apiCall('post', Api.index.wxMiniAuth, params);
				if (res) {
					var userInfo = uni.getStorageSync('userInfo');
					userInfo.mini_openid = res.mini_openid; //微信小程序openID
					this.login(userInfo); //微信小程序OpenID刷新用户信息缓存中
					this.loadData();
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background: $page-color-base;
		background-color: #FAFAFA;
		padding-bottom: 100upx;
	}

	.popup-box {
		width: 100vw;
		padding-top: 20upx;
		min-height: 0;
		max-height: 80vh;
		overflow-y: scroll;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		display: flex;
		flex-flow: column wrap;
	}

	.address-section {
		height: 200upx;
		padding-bottom: 6upx;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		// border-top: 1px solid $border-color-base;
		border-radius: 0 0 20upx 20upx;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			z-index: 1;
			top: 0;
			width: 100vw;
			height: 200upx;
			background: linear-gradient(-45deg,
				rgb(255, 121, 103) 12.5%, rgb(255, 255, 255) 0,
				rgb(255, 255, 255) 25%, rgb(124, 168, 255) 0,
				rgb(124, 168, 255) 37.5%, rgb(255, 255, 255) 0,
				rgb(255, 255, 255) 50%, rgb(255, 121, 103) 0,
				rgb(255, 121, 103) 62.5%, rgb(255, 255, 255) 0,
				rgb(255, 255, 255) 75%, rgb(124, 168, 255) 0,
				rgb(124, 168, 255) 87.5%, rgb(255, 255, 255) 0);
			background-size: 112upx 112upx;
		}

		.order-content {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;
			background: #fff;
			padding: 0 30upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;


			.top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 36upx;
				color: #232323;

				.left {
					display: inline-flex;
					align-items: center;
					justify-content: flex-start;

					.btn {
						display: inline-flex;
						justify-content: center;
						align-items: center;
						width: 50upx;
						height: 28upx;
						margin-right: 20upx;
						border-radius: 5upx;
						background-color: #FFBC21;
						font-size: 20upx;
						font-weight: 300;
						color: #FFFFFF;
					}
				}

				.name {
					font-size: 34upx;
					margin-right: 24upx;
				}

				.icon-you {
					font-size: 32upx;
					color: $font-color-light;
					display: inline-flex;
					align-items: center;
				}
			}

			.address {
				width: 100%;
				color: #232323;
				font-size: 26upx;
				margin-top: 16upx;
				color: $font-color-light;
			}
		}
	}

	.goods-section {
		margin-top: 16upx;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 88upx;
			padding: 0 30upx;
			position: relative;
			margin: 30upx 0 20upx;
			background: #fff;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			// margin-left: 24upx;
		}

		.g-item {
			width: 100%;
			height: 240upx;
			display: flex;
			padding: 0 30upx;
			margin-bottom: 20upx;
			background: #fff;

			image {
				flex-shrink: 0;
				display: block;
				width: 209upx;
				height: 209upx;
				margin: 10upx 0 20upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				margin: 10upx 0 20upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.item-price-box {
				display: flex;
				align-items: center;
				font-size: 34upx;
				color: #000;
				padding-top: 72upx;

				// margin-bottom: 150upx;
				.price {
					margin-bottom: 4upx;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 30upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.title {
			color: #232323;
			font-size: 28upx;
			font-weight: 600;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}

		.custom-input-integral {
			width: 108upx;
			height: 58upx;
			background-color: #EFF2F4;
			font-size: $font-base;
			color: $font-color-dark;
			border-radius: 5upx;
			margin: 0 10upx;
			text-align: center;
		}
	}

	.align-t-b-cell {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;

		.cell-dec {
			display: inline-block;
			font-size: 24upx;
			flex-flow: row nowrap;
			color: $font-color-light;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}

		.tit {
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.footer {
		position: fixed;
		padding: 0 30upx;
		left: 0;
		bottom: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		color: $font-color-base;
		box-shadow: 0 -3upx 6upx rgba(172, 172, 172, .1);

		.price-content {
			color: #232323;
			font-size: 28upx;
		}

		.price-tip {
			color: #E52631;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
			color: #E52631;
		}

		.submit {
			width: 200upx;
			height: 78upx;
			margin-left: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 280upx;
			// height: 100%;
			// color: #232323;
			color: #FFF;
			font-size: 26upx;
			border-radius: 39upx;
			// background-color: $base-color;
			background-color: #FFBC21;
		}
	}

	/* 优惠券面板 */
	// .mask {
	// 	display: flex;
	// 	align-items: flex-end;
	// 	position: fixed;
	// 	left: 0;
	// 	top: var(--window-top);
	// 	bottom: 0;
	// 	width: 100%;
	// 	background: rgba(0, 0, 0, 0);
	// 	z-index: 9995;
	// 	transition: .3s;

	// 	.mask-content {
	// 		width: 100%;
	// 		min-height: 30vh;
	// 		max-height: 70vh;
	// 		background: #f3f3f3;
	// 		transform: translateY(100%);
	// 		transition: .3s;
	// 		overflow-y: scroll;
	// 	}

	// 	&.none {
	// 		display: none;
	// 	}

	// 	&.show {
	// 		background: rgba(0, 0, 0, .4);

	// 		.mask-content {
	// 			transform: translateY(0);
	// 		}
	// 	}
	// }

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $base-color;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}

	.price-box {
		background-color: #fff;
		padding: 20upx 0 40upx 0;
		box-sizing: border-box;
		// height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 70upx;
			// color: #303133;
			color: #FFBC21;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		// margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;
		padding-bottom: 60upx;

		.type-item {
			height: 100upx;
			// padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.pay-btn {
		width: 100%;
		height: 90upx;
		text-align: center;
		line-height: 90upx;
		font-size: 28upx;
		background-color: #FFBC21;
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		/* background-color: $base-color; */
		background-color: #FFBC21;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
